<template>
  <div class="order-info-wrap">
    <div class="order-info" v-for="orderVo in orderVos">
      <div class="shop-name"><p>{{ orderVo.shopName }}</p></div>
      <div class="product-list" v-for="product in orderVo.orderItemVoList">
        <img :src=product.productImage />
        <div>
          <p>{{ product.productName }}</p>
          <p>{{ product.property }}--{{ product.specification }} </p>
          <p class="colour">￥{{product.currentUnitPrice}}</p>
        </div>
        <div class="count">
          <p>数量：{{ product.quantity }} </p>
        </div>
      </div>
      <div class="summation">合计:￥{{orderVo.payment}}</div>
      <div @click="btnClick(orderVo)"><span class="btn-pay">{{butText}}</span></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    components: {},
    props :{
      orderVos:{
        type: Array,
        default: []
      },
      butText:{
        type: String,
        default:'支付'
      }
    },
    data() {
      return {}
    },
    methods:{
      btnClick(orderVo){
        this.$emit('btn-click', orderVo)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/variable.styl"
  @import "../../common/stylus/mixin.styl"
  .order-info-wrap{
    margin-top :40px
    .order-info {
      list(row)
      width: 100%
      padding: 5px 7px
      box-sizing: border-box;
      border-bottom: 5px solid $color-background
      div {
        list(row)
        width: 100%

      }
      .product-list {
        list(row)
        width: 100%
        align-items: center
        border-bottom: 1px solid $color-background
        padding: 6px
        font-size: $font-size-medium
        box-sizing: border-box
        img {
          width: 60px
          height: 60px
        }
        div {
          flex: 6
          list(column)
          padding-left: 4px
          justify-content: space-between
          p {
            font-size: 12px
            &:first-child {
              flex: 2
              line-height: 1.1
              padding: 2px 0px
            }
            &:nth-child(2) {
              flex: 1
              padding: 2px 0px
            }
            &:nth-child(3) {
              flex: 1
              padding: 2px 0px
            }
          }
        }

        .count {
          flex: 2
          list(column)
          align-items: center
          margin: 4px
        }
      }

      .shop-name {
        height: 30px
        line-height: 30px
        font-size: $font-size-medium-x
        border-bottom: 1px solid $color-background
      }
      .summation {
        height: 40px
        line-height: 40px
      }
      .btn-pay {
        width :30%
        padding: 6px
        background: $color-background-panel
        font-size: $font-size-medium
        border: 1px solid $color-theme
        border-radius: 3px
        text-align: center
        display: inline-block
        margin-left :60%
      }
    }
  }

</style>
